<template>
  <div class="add">
    <el-container>
      <el-header class="header">
        <el-dropdown>
          <span class="el-dropdown-link">
            <el-button type="text">{{testType || '题型'}}</el-button><i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item,index) in testTypeList" :key="index" @click.native="testType = item.name">{{item.name}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button type="text" style="margin-left: 10px" :disabled="!testType" @click="addQuestionInfo">添加 +</el-button>
        <span style="float: right">
          <el-button type="info"> 导入题库 <i class="el-icon-upload2"></i> </el-button>
          <el-button type="danger"> 导出题库 <i class="el-icon-download"></i> </el-button>
          <el-button type="primary"> 导出PDF <i class="el-icon-refresh"></i> </el-button>
        </span>
      </el-header>
      <el-main class="main">
        <el-row v-for="(item,index) in questionList" :key="index">
          <el-row>
            {{index+1}}、【{{item.testType}} | 2分】
            <el-button @click="questionList.splice(index,1)" type="text"><i class="el-icon-delete"></i></el-button>
          </el-row>
          <singleChoice :index="index+1" v-if="item.testType === '单选题'" />
          <multipleChoice :index="index+1" v-if="item.testType === '多选题'" />
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  import singleChoice from './singleChoice'
  import multipleChoice from './multipleChoice'
  export default {
    name: 'add',
    props: [''],
    components: { singleChoice,multipleChoice},
    data() {
      return {
        testTypeList:[],
        testType: null,
        questionList:[]
      }
    },
    computed: {},
    methods: {
      submit(){
        let cnt=this.$JSP(this.ruleForm)
        if(!this.updates){
          cnt.ids=Date.now()
          this.$api.add('question',cnt,res=>{
            this.tableData.splice(0,0,cnt)
            this.$refs.dialog.closeDia()
          })

        }else{
          this.$api.up('question',cnt,res=>{
            this.tableData.splice(this.index,1,cnt)
            this.$refs.dialog.closeDia()
          })
        }
      },
      addQuestionInfo(){
        this.questionList.push({
          ids:Date.now(),
          name:null,
          testType:this.testType,
          answer:null
        })
      }
    },
    mounted() {
      this.$api.get('testType',{$orderBY: {col:'ids'}},res=>{
        this.testTypeList=res
      })
    },
    created() {
    },
    watch: {}
  }
</script>

<style scoped lang="scss">
  .add {
    .main {
      height: calc(100vh - 140px);
      overflow: auto;
    }
    .header {
      background-color: #ecf0f5;
      line-height: 60px;
      height: 60px;
    }
  }
</style>

